<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jq.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 顶部导航条 -->
        <div class="topbar">
            <!-- 限制宽度 -->
            <div class="w">
                <!-- 导航栏 -->
                <div class="topbar-nav">
                    <ul>
                        <li>
                            <a href="https://mi.com">小米官网</a>
                        </li>
                        <li>
                            <a href="https://mi.com/shop">小米商城</a>
                        </li>
                        <li>
                            <a href="#">MIUI</a>
                        </li>
                        <li>
                            <a href="#">IoT</a>
                        </li>
                        <li>
                            <a href="#">云服务</a>
                        </li>
                        <li>
                            <a href="#">天星数科</a>
                        </li>
                        <li>
                            <a href="#">有品</a>
                        </li>
                        <li>
                            <a href="#">小爱开放平台</a>
                        </li>
                        <li>
                            <a href="#">企业团购</a>
                        </li>
                        <li>
                            <a href="#">资质证照</a>
                        </li>
                        <li>
                            <a href="#">协议规则</a>
                        </li>
                        <li class="downloadApp">
                            <a href="#">下载app</a>
                            <div class="downloadAppWrap">
                                <div class="downloadAppTri"></div>
                                <a href="#" class="downloadAppCode" style="border-right: none; padding: 0;">
                                    <img src="./image/downloadAppQrcode.png" width="90px">
                                    <span>小米商城APP</span>
                                </a>
                            </div>

                        </li>
                        <li>
                            <a href="#"> Select Location</a>
                        </li>
                    </ul>
                </div>
                <!-- 购物车 -->
                <div class="shoppingCar">
                    <div class="shoppingCar_image">
                        <img src="./image/shoppingCar.png" width="20px">
                    </div>
                    <div class="shoppingCar_text">
                        购物车 (0)
                    </div>
                    <!-- 购物车商品预览 -->
                    <div class="shoppingCar_area">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </div>
                <!-- 用户导航 -->
                <div class="topbar-user">
                    <ul>
                        <li>
                            <a href="#">登录</a>
                        </li>
                        <li>
                            <a href="#">注册</a>
                        </li>
                        <li>
                            <a href="#">消息通知</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- logo、分类和搜索 -->
        <div class="site">
            <div class="w" style="height: 100px;">
                <!-- logo -->
                <div class="logo">
                    <a href="https://mi.com">
                        <img src="./image/logo2.png" width="60px">
                    </a>
                </div>
                <!-- 分类 -->
                <div class="classification">
                    <ul>
                        <li class="clShopShow">
                            <span>Xiaomi手机</span>
                        </li>
                        <li class="clShopShow">
                            <span>Redmi手机</span>
                        </li>
                        <li class="clShopShow">
                            <span>电视</span>
                        </li>
                        <li class="clShopShow">
                            <span>笔记本</span>
                        </li>
                        <li class="clShopShow">
                            <span>平板</span>
                        </li>
                        <li class="clShopShow">
                            <span>家电</span>
                        </li>
                        <li class="clShopShow">
                            <span>路由器</span>
                        </li>
                        <li>
                            <a href="#">服务中心</a>
                        </li>
                        <li>
                            <a href="#">社区</a>
                        </li>
                    </ul>
                </div>
                <!-- 搜索框 -->
                <div class="select">
                    <div class="selectInput">
                        <input type="text" id="selectInput" placeholder='红米'>
                    </div>
                    <div class="selectImg">
                        <button id="selectImg">
                            <img src="./image/select.png" width="18px">
                        </button>
                    </div>
                    <div class="selectList">
                        <ul>
                            <li>
                                <a href="#">全部商品</a>
                            </li>
                            <li>
                                <a href="#">红米</a>
                            </li>
                            <li>
                                <a href="#">Redmi G 2021</a>
                            </li>
                            <li>
                                <a href="#">电视</a>
                            </li>
                            <li>
                                <a href="#">冰箱</a>
                            </li>
                            <li>
                                <a href="#">手机</a>
                            </li>
                            <li>
                                <a href="#">黑鲨</a>
                            </li>
                            <li>
                                <a href="#">小米平板5</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 分类商品展示 -->
            <div class="clShopShowArea">
                <!-- xiaomi手机 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/小米手机1.webp">
                                </div>
                                <span>
                                    xiaomi 12S Ultra
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    5999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/小米手机2.webp">
                                </div>
                                <span>
                                    xiaomi 12S Pro
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    4699元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/小米手机3.webp">
                                </div>
                                <span>
                                    xiaomi 12S
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    3999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/小米手机4.webp">
                                </div>
                                <span>
                                    xiaomi 12Pro 天玑版
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    3999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/小米手机5.webp">
                                </div>
                                <span>
                                    xiaomi civi 1s
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    2299元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/小米手机6.webp">
                                </div>
                                <span>
                                    xiaomi 12 Pro
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    4699元起
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- Redmi手机 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/Redmi手机1.webp">
                                </div>
                                <span>
                                    Redmi note 11T Pro+
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    1999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/Redmi手机2.webp">
                                </div>
                                <span>
                                    Redmi note 11T Pro
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    1699元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/Redmi手机3.webp">
                                </div>
                                <span>
                                    Redmi note 11SE
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/Redmi手机4.webp">
                                </div>
                                <span>
                                    Redmi 10A
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    649元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/Redmi手机5.webp">
                                </div>
                                <span>
                                    Redmi K50 Pro
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    2999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/Redmi手机6.webp">
                                </div>
                                <span>
                                    Redmi K50
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    2399元起
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 电视 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/电视1.webp">
                                </div>
                                <span>
                                    Redmi只能电视X55 2022
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    2399元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/电视2.webp">
                                </div>
                                <span>
                                    Redmi只能电视X65 2022
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    3099元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/电视3.webp">
                                </div>
                                <span>
                                    小米电视6 65" OLED
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    6699元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/电视4.webp">
                                </div>
                                <span>
                                    小米电视 大师 77" OLED
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    17999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/电视5.webp">
                                </div>
                                <span>
                                    小米透明电视
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    49999元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/电视6.webp">
                                </div>
                                <span>
                                    小米电视 大师 65英寸OLED
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    8999元起
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 笔记本 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/笔记本1.webp">
                                </div>
                                <span>
                                    xiaomi Book Pro 14 2022
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    6799元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/笔记本2.webp">
                                </div>
                                <span>
                                    xiaomi Book Pro 16 2022
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    7399元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/笔记本3.webp">
                                </div>
                                <span>
                                    RedmiBook Pro 14 2022 锐龙版
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    5299元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/笔记本4.webp">
                                </div>
                                <span>
                                    RedmiBook Pro 15 2022 锐龙版
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    5499元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/笔记本5.webp">
                                </div>
                                <span>
                                    RedmiBook Pro 14 锐龙版
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    4699元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/笔记本6.webp">
                                </div>
                                <span>
                                    RedmiBook Pro 14 2022
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    5399元起
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 平板 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/平板1.webp">
                                </div>
                                <span>
                                    小米平板5
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    1899元起
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/平板2.webp">
                                </div>
                                <span>
                                    小米平板5 Pro 5G
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    3349元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/平板3.webp">
                                </div>
                                <span>
                                    小米平板5 Pro
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    2349元起
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 家电 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/家电1.webp">
                                </div>
                                <span>
                                    巨省电 | 米家空调 1.5匹 新1级能效 睡眠版
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    2199元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/家电2.webp">
                                </div>
                                <span>
                                    巨省电 3匹|变频|新一级能效（鎏金款）
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    5299元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/家电3.webp">
                                </div>
                                <span>
                                    米家扫拖机器人 1T
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    1299元
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 路由器 -->
                <div class="clShopList">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/路由器1.webp">
                                </div>
                                <span>
                                    Redmi电竞路由器AX5400
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    549元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/路由器2.webp">
                                </div>
                                <span>
                                    小米路由器AX6000
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    549元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/路由器3.webp">
                                </div>
                                <span>
                                    小米路由器AX9000
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    1299元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/路由器4.webp">
                                </div>
                                <span>
                                    Xiaomi HomeWiFi 三频 Mesh 路由器
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    1499元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/路由器5.jpg">
                                </div>
                                <span>
                                    小米路由器4A 千兆版
                                </span>
                                <br>
                                <span style="color: #ff6700;">
                                    129元
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="clShopListImgWrap">
                                    <img src="./image/路由器6.png">
                                </div>
                                <span>
                                    查看全部
                                </span>
                                <br>
                                <span>
                                    小米路由器
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 横幅 -->
    <div class="banner">
        <!-- 横幅导航栏 -->
        <div class="banner-nav">
            <ul>
                <li>
                    <a href="#">
                        手机
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>

                </li>
                <li>
                    <a href="#">
                        电视
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        笔记本 平板
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        出行 穿戴
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        耳机 音响
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        家电
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        智能 路由器
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        电源 配件
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        健康 儿童
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
                <li>
                    <a href="#">
                        生活 箱包
                    </a>
                    <span class="banner-nav-gt">
                        <img src="./image/toRight.png" width="16px">
                    </span>
                </li>
            </ul>
        </div>
        <!-- 横幅商品列表展示 -->
        <div class="banner-nav-goodsShow">
            <div class="banner-nav-goodsWrap" style="width: 512px;">
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone1.webp" width="40px">
                    <span>Xiaomi 12S</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone2.webp" width="40px">
                    <span>Xiaomi 12S Ultra</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone3.webp" width="40px">
                    <span>Xiaomi 12S Pro</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone4.webp" width="40px">
                    <span>Xiaomi 12 Pro 天玑版</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone5.webp" width="40px">
                    <span>Note 11T Pro+</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone6.webp" width="40px">
                    <span>Note 11T Pro</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavPhone7.webp" width="40px">
                    <span>Note 11SE</span>
                </div>
            </div>
            <div class="banner-nav-goodsWrap" style="width: 256px;">
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavTV1.webp" width="40px">
                    <span>Redmi X65 2022款</span>
                </div>
                <div class="banner-nav-goodsShowList">
                    <img src="./image/bannerNavTV2.webp" width="40px">
                    <span>小米拍拍4K高清投屏器</span>
                </div>
            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    笔记本 平板内容
                </div>
            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    出行 穿戴内容
                </div>

            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    耳机 音响内容
                </div>
            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    家电内容
                </div>

            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    智能 路由器内容
                </div>
            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    电源 配件内容
                </div>
            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    健康 儿童内容
                </div>
            </div>
            <div class="banner-nav-goodsWrap">
                <div class="banner-nav-goodsShowList">
                    生活 箱包内容
                </div>
            </div>
        </div>
        <!-- 横幅轮播图 -->
        <div class="banner-swiper">
            <button id="bannerDown">
                <img src="./image/bannerDown.png" width="41px">
            </button>
            <button id="bannerUp">
                <img src="./image/bannerUp.png" width="41px">
            </button>
            <ul>
                <li class="bannerCheckLi">
                    <button class="bannerCheck"></button>
                </li>
                <li class="bannerCheckLi">
                    <button class="bannerCheck"></button>
                </li>
                <li class="bannerCheckLi">
                    <button class="bannerCheck"></button>
                </li>
                <li class="bannerCheckLi">
                    <button class="bannerCheck"></button>
                </li>
                <li class="bannerCheckLi">
                    <button class="bannerCheck"></button>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主页 -->
    <div class="home">
        <!-- 主页服务 -->
        <div class="home-nav">
            <ul>
                <li>
                    <a href="#">
                        <img src="./image/时钟.png" width="24px" height="24px">
                        <br>
                        <span>保障服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/建筑.png" width="24px" height="24px">
                        <br>
                        <span>企业团购</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/F.png" width="24px" height="24px">
                        <br>
                        <span>F码通道</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/sim.png" width="24px" height="24px">
                        <br>
                        <span>米粉卡</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/金币兑换.png" width="24px" height="24px">
                        <br>
                        <span>以旧换新</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/话费.png" width="24px" height="24px">
                        <br>
                        <span>话费充值</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 图片展示 -->
        <div class="home-nav-image">
            <a href="#">
                <img src="./image/home1.jpg" width="316x">
            </a>
            <a href="#">
                <img src="./image/home2.jpg" width="316x">
            </a>
            <a href="#">
                <img src="./image/home3.jpg" width="316x">
            </a>
        </div>
    </div>
    <!-- 商品列表展示区 -->
    <div class="shopList">
        <div class="shopListContent">
            <!-- 横向展示图 -->
            <div class="shopShowImg">
                <a href="#">
                    <img src="./image/shopshow.webp" width="1226px">
                </a>
            </div>
            <!-- 手机 -->
            <div class="shopListShow">
                <div class="shopListShowTop">
                    <span class="shopListShowTitle">手机</span>
                    <div class="shopListShowMore">
                        <a href="#">
                            查看更多
                            <div></div>
                        </a>
                    </div>
                </div>
                <div class="shopListShowContent">
                    <div class="shopListShowContentLeft shopListShowContentHover">
                        <a href="#">
                            <img src="./image/手机0webp.webp" width="234px">
                        </a>
                    </div>
                    <div class="shopListShowContentRight">
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机1.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S Ultra</span>
                            <br>
                            <span>这真徕卡 | 专业徕卡影像</span>
                            <br>
                            <span>5999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机2.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S Pro</span>
                            <br>
                            <span>骁龙8+ 旗舰处理器 | 徕卡影像</span>
                            <br>
                            <span>4699元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机3.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S</span>
                            <br>
                            <span>小尺寸性能旗舰 | 徕卡影像</span>
                            <br>
                            <span>3999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机4.webp" width="160px">
                            <br>
                            <span>Xiaomi 12Pro 天玑版</span>
                            <br>
                            <span>全球首发天玑9000+ | 叶脉冷泵散热系统 | 2K AMOLED 超视感屏 | 5000万疾速影像</span>
                            <br>
                            <span>3999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机5.webp" width="160px">
                            <br>
                            <span>Redmi Note 11T Pro+</span>
                            <br>
                            <span>天玑8100 | 真旗舰芯</span>
                            <br>
                            <span>2099元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机6.webp" width="160px">
                            <br>
                            <span>Redmi Note 11T Pro</span>
                            <br>
                            <span>天玑8100 | 真旗舰芯</span>
                            <br>
                            <span>1799元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机7.webp" width="160px">
                            <br>
                            <span>Redmi Note 11SE</span>
                            <br>
                            <span>双卡双5G | 疾速登陆</span>
                            <br>
                            <span>5999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/手机8.webp" width="160px">
                            <br>
                            <span>Xiaomi Civi 1S</span>
                            <br>
                            <span>原生美肌人像 | 奇迹阳光动人新色 | 骁龙778G Plus</span>
                            <br>
                            <span>2299元起</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 智能穿戴 -->
            <div class="shopListShow">
                <div class="shopListShowTop">
                    <span class="shopListShowTitle">智能穿戴</span>
                    <div class="shopListShowChoose">
                        <span class="shopListShowChooseItem">热门</span>
                        <span class="shopListShowChooseItem">穿戴</span>
                    </div>
                </div>
                <div class="shopListShowContent">
                    <div class="shopListShowContentLeft shopListShowContentHover">
                        <a href="#">
                            <img src="./image/智能穿戴0.webp" width="234px">
                        </a>
                    </div>
                    <div class="shopListShowContentRight">
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴1.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S Ultra</span>
                            <br>
                            <span>这真徕卡 | 专业徕卡影像</span>
                            <br>
                            <span>5999元起</span>
                        </a>
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴2.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S Pro</span>
                            <br>
                            <span>骁龙8+ 旗舰处理器 | 徕卡影像</span>
                            <br>
                            <span>4699元起</span>
                        </a>
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴3.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S</span>
                            <br>
                            <span>小尺寸性能旗舰 | 徕卡影像</span>
                            <br>
                            <span>3999元起</span>
                        </a>
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴4.webp" width="160px">
                            <br>
                            <span>Xiaomi 12Pro 天玑版</span>
                            <br>
                            <span>全球首发天玑9000+ | 叶脉冷泵散热系统 | 2K AMOLED 超视感屏 | 5000万疾速影像</span>
                            <br>
                            <span>3999元起</span>
                        </a>
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴5.webp" width="160px">
                            <br>
                            <span>Redmi Note 11T Pro+</span>
                            <br>
                            <span>天玑8100 | 真旗舰芯</span>
                            <br>
                            <span>2099元起</span>
                        </a>
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴6.webp" width="160px">
                            <br>
                            <span>Redmi Note 11T Pro</span>
                            <br>
                            <span>天玑8100 | 真旗舰芯</span>
                            <br>
                            <span>1799元起</span>
                        </a>
                        <a href="#" class="wearHot shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴7.webp" width="160px">
                            <br>
                            <span>Redmi Note 11SE</span>
                            <br>
                            <span>双卡双5G | 疾速登陆</span>
                            <br>
                            <span>5999元起</span>
                        </a>
                        <a href="#" class="wear shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴8.webp" width="160px">
                            <br>
                            <span>Xiaomi Civi 1S</span>
                            <br>
                            <span>原生美肌人像 | 奇迹阳光动人新色 | 骁龙778G Plus</span>
                            <br>
                            <span>2299元起</span>
                        </a>
                        <a href="#" class="wear shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/智能穿戴9.webp" width="160px">
                            <br>
                            <span>Xiaomi Civi 1S</span>
                            <br>
                            <span>原生美肌人像 | 奇迹阳光动人新色 | 骁龙778G Plus</span>
                            <br>
                            <span>2299元起</span>
                        </a>
                        <div class="watchMore shopListShowContentHover">
                            <a href="#">
                                <div class="watchMoreText">
                                    <span>浏览更多</span>
                                    <br>
                                    <span>热门</span>
                                </div>
                                <div class="watchMoreIcon"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 笔记本平板 -->
            <div class="shopListShow">
                <div class="shopListShowTop">
                    <span class="shopListShowTitle">笔记本 | 平板</span>
                    <div class="shopListShowMore">
                        <a href="#">
                            查看更多
                            <div></div>
                        </a>
                    </div>
                </div>
                <div class="shopListShowContent">
                    <div class="shopListShowContentLeft shopListShowContentHover">
                        <a href="#">
                            <img src="./image/笔记本平板0.webp" width="234px">
                        </a>
                    </div>
                    <div class="shopListShowContentRight">
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板1.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S Ultra</span>
                            <br>
                            <span>这真徕卡 | 专业徕卡影像</span>
                            <br>
                            <span>5999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板2.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S Pro</span>
                            <br>
                            <span>骁龙8+ 旗舰处理器 | 徕卡影像</span>
                            <br>
                            <span>4699元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板3.webp" width="160px">
                            <br>
                            <span>Xiaomi 12S</span>
                            <br>
                            <span>小尺寸性能旗舰 | 徕卡影像</span>
                            <br>
                            <span>3999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板4.webp" width="160px">
                            <br>
                            <span>Xiaomi 12Pro 天玑版</span>
                            <br>
                            <span>全球首发天玑9000+ | 叶脉冷泵散热系统 | 2K AMOLED 超视感屏 | 5000万疾速影像</span>
                            <br>
                            <span>3999元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板5.webp" width="160px">
                            <br>
                            <span>Redmi Note 11T Pro+</span>
                            <br>
                            <span>天玑8100 | 真旗舰芯</span>
                            <br>
                            <span>2099元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板6.webp" width="160px">
                            <br>
                            <span>Redmi Note 11T Pro</span>
                            <br>
                            <span>天玑8100 | 真旗舰芯</span>
                            <br>
                            <span>1799元起</span>
                        </a>
                        <a href="#" class="shopListShowContentRightItem shopListShowContentHover">
                            <img src="./image/笔记本平板7.webp" width="160px">
                            <br>
                            <span>Redmi Note 11SE</span>
                            <br>
                            <span>双卡双5G | 疾速登陆</span>
                            <br>
                            <span>5999元起</span>
                        </a>
                        <div class="shopListShowContentRightItemM">
                            <div class="shopListShowContentRightItemSmall shopListShowContentHover">
                                <div class="shopListShowContentRightItemSmallText">
                                    <span>Redmi显示器23.8英寸</span>
                                    <br>
                                    <span>599元</span>
                                </div>
                                <div class="shopListShowContentRightItemSmallIcon"></div>
                            </div>
                            <div class="watchMore shopListShowContentHover">
                                <a href="#">
                                    <div class="watchMoreText">
                                        <span>浏览更多</span>
                                        <br>
                                        <span>热门</span>
                                    </div>
                                    <div class="watchMoreIcon"></div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 视频 -->
            <div class="video">
                <div class="shopListShowTop">
                    <span class="shopListShowTitle">视频</span>
                    <div class="shopListShowMore">
                        <a href="#">
                            查看更多
                            <div></div>
                        </a>
                    </div>
                </div>
                <div class="videoContent">
                    <div class="videoItem shopListShowContentHover">
                        <a href="#">
                            <img src="./image/video1.webp" width="296px">
                            <span>2021年春季新品发布会第一场</span>
                            <button class="videoPlay"><img src="./image/playvideo.png" height="10px"></button>
                        </a>
                    </div>
                    <div class="videoItem shopListShowContentHover">
                        <a href="#">
                            <img src="./image/video2.webp" width="296px">
                            <span>Redmi 10X系列发布会</span>
                            <br>
                            <span style="font-size:12px ;color:#b0b0b0;">Redmi 10X系列发布会</span>
                            <button class="videoPlay"><img src="./image/playvideo.png" height="10px"></button>
                        </a>
                    </div>
                    <div class="videoItem shopListShowContentHover">
                        <a href="#">
                            <img src="./image/video3.webp" width="296px">
                            <span>小米10 青春版 发布会</span>
                            <button class="videoPlay"><img src="./image/playvideo.png" height="10px"></button>
                        </a>
                    </div>
                    <div class="videoItem shopListShowContentHover">
                        <a href="#">
                            <img src="./image/video4.webp" width="296px">
                            <span>小米10 8K手机拍大片</span>
                            <button class="videoPlay"><img src="./image/playvideo.png" height="10px"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 服务 -->
    <div class="service">
        <!-- 服务种类 -->
        <div class="service-type">
            <div class="service-type-item">
                <a href="#">
                    <div></div>
                    <span>
                        预约维修服务
                    </span>
                </a>
            </div>
            <div class="service-type-item">
                <a href="#">
                    <div></div>
                    <span>
                        7天无理由退货
                    </span>
                </a>
            </div>
            <div class="service-type-item">
                <a href="#">
                    <div></div>
                    <span>
                        15天免费换货
                    </span>
                </a>
            </div>
            <div class="service-type-item">
                <a href="#">
                    <div></div>
                    <span>
                        满69元包邮
                    </span>
                </a>
            </div>
            <div class="service-type-item">
                <a href="#">
                    <div></div>
                    <span>
                        1100余家售后网点
                    </span>
                </a>
            </div>
        </div>
        <!-- 服务内容 -->
        <div class="service-content">
            <div class="service-content-left">
                <div></div>
                <div>
                    <span>选购指南</span>
                    <ul>
                        <li>
                            <a href="#">
                                手机
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                电视
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                笔记本
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                平板
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                穿戴
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                耳机
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                家电
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                路由器
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                音响
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                配件
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>服务中心</span>
                    <ul>
                        <li>
                            <a href="#">
                                申请售后
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                售后政策
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                维修服务价格
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                订单查询
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                以旧换新
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                保障服务
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                防伪查询
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                F码通道
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>线下门店</span>
                    <ul>
                        <li>
                            <a href="#">
                                小米之家
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                服务网点
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                授权体验店/专区
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>关于小米</span>
                    <ul>
                        <li>
                            <a href="#">
                                了解小米
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                加入小米
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                投资者关系
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                社会企业责任
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                廉洁举报
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>关注我们</span>
                    <ul>
                        <li>
                            <a href="#">
                                新浪微博
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                官方微信
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                联系我们
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                公益基金会
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="service-content-right">
                <p>400-100-5678</p>
                <p>8:00-18:00(仅收市话费)</p>
                <a href="#">
                    <div></div>
                    人工客服
                </a>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="footerWrap">
            <!-- 左侧logo -->
            <div class="footer-logo">
                <a href="#">
                    <img src="./image/logo2.png" width="55px">
                </a>
            </div>
            <!-- 右侧信息 -->
            <div class="footer-right">
                <p>
                    <a href="#">小米商城</a>
                    <span class="sep">|</span>
                    <a href="#">MIUI</a>
                    <span class="sep">|</span>
                    <a href="#">米家</a>
                    <span class="sep">|</span>
                    <a href="#">米聊</a>
                    <span class="sep">|</span>
                    <a href="#">多看</a>
                    <span class="sep">|</span>
                    <a href="#">游戏</a>
                    <span class="sep">|</span>
                    <a href="#">政企服务</a>
                    <span class="sep">|</span>
                    <a href="#">小米天猫店</a>
                    <span class="sep">|</span>
                    <a href="#">小米集团隐私政策</a>
                    <span class="sep">|</span>
                    <a href="#">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span>
                    <a href="#">小米商城隐私政策</a>
                    <span class="sep">|</span>
                    <a href="#">小米商城用户协议</a>
                    <span class="sep">|</span>
                    <a href="#">问题反馈</a>
                    <span class="sep">|</span>
                    <a href="#">Select Location</a>
                </p>
                <p>
                    <a href="#">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span>
                    <a href="#">中国消费者协会</a>
                    <span class="sep">|</span>
                    <a href="#">北京市消费者协会</a>
                </p>
                <p>
                    &copy;
                    <a href="#">mi.com</a> 京ICP证110507号
                    <a href="#">京ICP备10046444号</a>
                    <a href="#">京公网安备11010802020134号</a>
                    <a href="#">京网文[2020]0276-042号</a>
                    <br>
                    <a href="#">(京)网械平台备字(2018)第00005号</a>
                    <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                    <a href="#">营业执照</a>
                    <a href="#">医疗器械质量公告</a>
                    <br>
                    <a href="#">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="#">食品经营许可证</a>
                    <br>
                    违法和不良信息举报电话:171-5104-4404&nbsp;<a href='#'>知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <div class="footerImg">
                    <img src="./image/footer1.png" width="92px">
                    <img src="./image/footer2.png" width="92px">
                    <img src="./image/footer3.png" width="92px">
                    <img src="./image/footer4.png" width="92px">
                    <img src="./image/footer5.png" width="92px">
                </div>
            </div>
            <!-- slogan -->
            <div class="slogan"> </div>
        </div>
    </div>
    <!-- 左侧工具栏 -->
    <div class="tools">
        <div class="toolsItem" id="backTop">
            <div></div>
            <br>
            回顶部
        </div>
        <div class="toolsItem">
            <div></div>
            <br>
            购物车
        </div>
        <div class="toolsItem">
            <div></div>
            <br>
            人工客服
        </div>
        <div class="toolsItem">
            <div></div>
            <br>
            售后服务
        </div>
        <div class="toolsItem">
            <div></div>
            <br>
            个人中心
        </div>
        <div class="toolsItem" id="phoneApp">
            <div class="phoneAppImg"></div>
            <br>
            手机APP
        </div>
        <div class="appContent">
            <div class="appContentT"></div>
            <img src="./image/appQrcode.png" width="100px">
            <br>
            <span>扫码领取新人百元礼包</span>
        </div>
    </div>
    <!-- 脚本 -->
    <script>
        //鼠标悬停在分类区域
        $('.clShopShow,.clShopShowArea').hover(
            //进入时给分类展示区域添加样式，使其展示,并让搜索框失去焦点
            () => {
                $('.clShopShowArea').css({ 'height': '229px', 'border-top': '#e0e0e0 1px solid', 'box-shadow': '0 2px 2px rgba(0,0,0,.15)', 'padding-top': '0px' });
                $('#selectInput').blur();
            },
            //离开时将之前设置的样式取消
            () => {
                $('.clShopShowArea').css({ 'height': '0px', 'border-top': 'none', 'box-shadow': 'none', 'padding-top': '1px' });
                setTimeout(() => {
                    $('.clShopShowArea').css('padding-top', '0px');
                }, 500);
            }
        );
        //改变展示商品列表
        $('.clShopShow').hover(
            function () {
                //获取所悬停元素的索引值
                var i = $(this).index();
                //将所有展示的商品列表取消
                $('.clShopList').hide();
                //展示选中索引值所对应的商品
                $(`.clShopList:eq(${i})`).show();
            }
        );
        // 搜索框默认不聚焦
        let isSelectInputFocus = false;
        //搜索框聚焦时改变边框颜色,展示搜索列表
        $('#selectInput').focus(() => {
            isSelectInputFocus = true
            $('#selectInput,#selectImg').css('border-color', '#ff6700');
            $('.selectList').show();
        });
        //搜索框失焦时改变边框颜色,关闭搜索列表
        $('#selectInput').focusout(() => {
            isSelectInputFocus = false
            $('#selectInput,#selectImg').css('border-color', '#e0e0e0');
            $('.selectList').hide();
        });
        //鼠标在搜索框区域时改变边框颜色
        $('.select').mouseover(() => {
            //判断搜索框是否聚焦，若聚焦则以聚焦颜色为主，否则才改变边框颜色
            if (!isSelectInputFocus) {
                $('#selectInput,#selectImg').css('border-color', '#b0b0b0');
            }
        });
        //鼠标离开搜索框区域时改变边框颜色
        $('.select').mouseout(() => {
            //判断搜索框是否聚焦，若聚焦则以聚焦颜色为主，否则才改变边框颜色
            if (!isSelectInputFocus) {
                $('#selectInput,#selectImg').css('border-color', '#e0e0e0');
            }
        });
        //设置横幅轮播图索引值
        let bannerIndex = 0;
        //设置横幅轮播图循环定时器名
        let bannerInterval;
        //设置横幅轮播图背景图片地址
        let bannerList = ['./image/banner1.jpg', './image/banner2.webp', './image/banner3.webp', './image/banner4.webp', './image/banner5.webp'];
        //设置索引值改变时需要改动的样式的函数
        function bannerIndexChanged() {
            //设置背景图片
            $('.banner').css('background-image', 'url(' + bannerList[bannerIndex]);
            //设置选择按钮样式
            $(`.bannerCheck`).css({ 'background-color': '#949494', 'border-color': 'hsla(0,0%,100%,.3)' });
            $(`.bannerCheck:eq(${bannerIndex})`).css({ 'background-color': 'hsla(0,0%,100%,.4)', 'border-color': 'rgba(0,0,0,.4)' });
        }
        //设置横幅轮播图循环定时器函数
        function bannerTimer() {
            bannerInterval = setInterval(() => {
                //横幅轮播图索引值加一
                bannerIndex++;
                //若加至索引最大值之上则从0开始
                if (bannerIndex === bannerList.length) {
                    bannerIndex = 0;
                }
                //改变样式
                bannerIndexChanged();
            }, 5000);
        }
        //横幅轮播图左侧上一张点击
        $('#bannerDown').click(() => {
            //横幅轮播图索引值减一
            bannerIndex--;
            //若减至负数则从索引值最大值开始
            if (bannerIndex === -1) {
                bannerIndex = bannerList.length - 1;
            }
            //改变样式
            bannerIndexChanged();
        });
        //横幅轮播图右侧下一张点击
        $('#bannerUp').click(() => {
            //横幅轮播图索引值加一
            bannerIndex++;
            //若加至索引最大值之上则从0开始
            if (bannerIndex === bannerList.length) {
                bannerIndex = 0;
            }
            //改变样式
            bannerIndexChanged();
        });
        //鼠标悬停选择按钮改变样式
        $('.bannerCheckLi').hover(
            function () {
                //获取所悬停选择按钮的索引值
                var i = $(this).index();
                //改变悬停选择按钮的样式
                $(`.bannerCheck:eq(${i})`).css({ 'background-color': 'hsla(0,0%,100%,.4)', 'border-color': 'rgba(0,0,0,.4)' });
            },
            function () {
                //获取所悬停选择按钮的索引值
                var i = $(this).index();
                //恢复样式
                $(`.bannerCheck`).css({ 'background-color': '#949494', 'border-color': 'hsla(0,0%,100%,.3)' });
                $(`.bannerCheck:eq(${bannerIndex})`).css({ 'background-color': 'hsla(0,0%,100%,.4)', 'border-color': 'rgba(0,0,0,.4)' });

            }
        );
        //点击选着按钮跳转至选项
        $('.bannerCheckLi').click(function () {
            //获取所悬停选择按钮的索引值，并将所悬停选择按钮的索引值赋给轮播图索引值
            bannerIndex = $(this).index();
            //改变样式
            bannerIndexChanged();
        });
        //鼠标悬停在上一张，下一张按钮及选择按钮
        $('#bannerDown,#bannerUp,.bannerCheck').hover(
            //清除定时器，停止轮播
            () => {
                clearInterval(bannerInterval);
            },
            //重新开始定时器，开始轮播
            () => {
                bannerTimer();
            }
        );
        //设置横幅商品展示的索引
        let bannerNavActive = -1;
        //鼠标在横幅商品分类上悬停
        $('.banner-nav ul li').hover(
            function () {
                //获取所悬停横幅商品分类的索引值
                var i = $(this).index();
                //将所获取的索引值赋给幅商品展示的索引
                bannerNavActive = i;
                //改变样式
                $(`.banner-nav ul li:eq(${i})`).addClass('banner-navActive');
                $(`.banner-nav-goodsWrap:eq(${i})`).css('display', 'flex');
            },
            () => {
                //离开时恢复样式
                $('.banner-nav ul li').removeClass('banner-navActive');
                $('.banner-nav-goodsWrap').css('display', 'none');
            }
        );
        //鼠标悬停在横幅商品展示上
        $('.banner-nav-goodsShow').hover(
            function () {
                $(`.banner-nav ul li:eq(${bannerNavActive})`).addClass('banner-navActive');
                $(`.banner-nav-goodsWrap:eq(${bannerNavActive})`).css('display', 'flex');
            },
            () => {
                $('.banner-nav ul li').removeClass('banner-navActive');
                $('.banner-nav-goodsWrap').css('display', 'none');
            }
        );
        //热门与产品切换
        $('.shopListShowChooseItem').hover(
            function () {
                var i = $(this).index();
                if (i === 0) {
                    $('.shopListShowChooseItem').css({ 'color': '#424242', 'border-color': '#f5f5f5' });
                    $('.shopListShowChooseItem:eq(0)').css({ 'color': '#ff6700', 'border-color': '#ff6700' });
                    $('.wear').css('display', 'none');
                    $('.wearHot').css('display', 'inline-block');
                } else {
                    $('.shopListShowChooseItem').css({ 'color': '#424242', 'border-color': '#f5f5f5' });
                    $('.shopListShowChooseItem:eq(1)').css({ 'color': '#ff6700', 'border-color': '#ff6700' });
                    $('.wearHot').css('display', 'none');
                    $('.wear').css('display', 'inline-block');
                }
            }
        );
        //滚动条滚动设置样式
        $(window).scroll(()=>{
          if($(window).scrollTop()>810){
            $('#backTop').css('display','block');
            $('.appContent').css('top','0');
          }else{
            $('#backTop').css('display','none');
            $('.appContent').css('top','105px');
          }
        });
        //回到顶部
        $('#backTop').click(()=>{
            $(window).scrollTop(0);
        });
        //手机APP悬浮样式
        $('.appContent,#phoneApp').hover(
            ()=>{
                $('.appContent').css('display','block');
                $('#phoneApp').addClass('toolsItemActive');
                $('.phoneAppImg').css('background-image','url(./image/phoneActive.png)');
            },
            ()=>{
                $('.appContent').css('display','none');
                $('#phoneApp').removeClass('toolsItemActive');
                $('.phoneAppImg').css('background-image','url(./image/phone.png)');
            }
        );
        //自执行函数
        (function () {
            //搜索框的占位符
            //设置占位符的列表和索引
            let selectList = ['红米', '显示器', '耳机', '小米平板5', 'Redmi G 2021', '冰箱'];
            let selectIndex = 1;
            //定时器循环更换
            setInterval(() => {
                if (selectIndex === selectList.length) {
                    selectIndex = 0
                };
                $('#selectInput').attr('placeholder', selectList[selectIndex]);
                selectIndex++;
            }, 5000);
            //横幅区轮播图自启动
            bannerTimer();
        })();
    </script>
</body>

</html>